<template>
    <div id="chart-panel-zoom" class="chart-panel-zoom" v-show="enlargeChart">
        <div id="title" class="title">
        <i class="close icon-font el-icon-close" @click="closeInfoWin"></i>
        </div>
        <div class="selectBox">
          <el-select
            class="pos"
            style="margin-left:10px;"
            v-model="iden_num.selectedValue"
            size="mini"
            @change="changeShowIdenNum"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in iden_num.iden_num_arr"
              :key="item.value"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="changeEcharts">
            <span class="pos fontClass" @click="initLineChart" title="折线图" >
            <img style="width:18px;height:auto;" src="../../images/line_a.png" alt="折线图" />
            </span>
            <span class="pos fontClass" @click="initBarDJChart" title="堆积图">
            <img style="width:18px;height:auto;" src="../../images/bar_a.png" alt="堆积图" />
            </span>
            <span class="pos fontClass" @click.prevent="initBarChart" title="多柱状图">
            <img style="width:18px;height:auto;" src="../../images/bar_b.png" alt="多柱状图" />
            </span>
            <!-- <span class="pos fontClass" @click.prevent="initParallelChart" title="平行坐标图">
            <img style="width:16px;height:auto;" src="../../images/parallel.png" alt="平行坐标图" />
            </span> -->
            <span class="pos fontClass" @click.prevent="initNestedPiesChart" title="极地坐标图">
            <img style="width:16px;height:auto;" src="../../images/nested_pies.png" alt="极地坐标图" />
            </span>
            <span class="pos fontClass" @click.prevent="initTreemapChart" title="矩形树图">
            <img style="width:16px;height:auto;" src="../../images/treemap.png" alt="矩形树图" />
            </span>
        </div>
        <div class="chart-content">
          <div id="chart-container-zoom" v-if="!iSnoData"></div>
          <h2 class="noData" v-if="iSnoData">暂无数据</h2>
        </div>  
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import echarts from "echarts";
import axios from "axios";
import microConfig from "static/config/micro.js";
import * as microAPI from "@/pages/micro/api/micro.js";
import  'echarts/theme/macarons.js';
export default {
  name: "EnlargeChart",
  data(){
      return {
        pieShow:true,
        left: document.documentElement.clientWidth - 420,
        top: 510,
        iSnoData:true,
        changeEchartsStyle:false,
        tableVisible:false,
        tableData: [],
        myChart: null,
        selectedSearchData2:this.getSelectedSearchData,
        selectedSearchParams:{},
        regionNameList:[],
        echartsStyleItem:'line',
        iden_num:{//数字下拉参数
          iden_num_arr:[],//数字指标
          selectedValue:''//选中值
        },
        region:[]//所有区划名称
    }
  },
  computed: {
    ...mapState({
      enlargeChart: state => state.micro.enlargeChart,
      showMapControl: state => state.micro.showMapControl,
      showEchartsLayer: state => state.micro.showEchartsLayer,
      showMapTableLayer: state => state.micro.showMapTableLayer,
    })
  },
  mounted(){
    //改变图标类型
    EventBus.$on('currentChartType',(echartsStyle)=>{
        this.echartsStyleItem = echartsStyle;
        if(this.tableData.tableData.length==0||!this.enlargeChart){
          return;
        }
        switch (this.echartsStyleItem) {
            case "line":
                this.initLineChart();
            break;
            case "bar":
                this.initBarChart();
            break;
            case "barDJ":
                this.initBarDJChart()
            break;
            // case "parallel":
            //     this.initParallelChart()
            // break;
            case "nestedPies":
                this.initNestedPiesChart()
            break;
            case "treemap":
                this.initTreemapChart()
            break;      
            default:
            break;
        }
    })
    //切换指标重绘图
    EventBus.$on("changeMainData", (changeTableData)=>{
      this.region = [];
      this.tableData = changeTableData.tableData;
      // this.tableData = changeTableData;
      this.iSnoData = false;
       if(changeTableData.iden_num_arr.length>0){
        this.iden_num.iden_num_arr = changeTableData.iden_num_arr;
        this.iden_num.selectedValue = changeTableData.iden_num_arr[0].name;
      }
      if(this.tableData.tableData.length&&this.enlargeChart){
        this.iSnoData = false;
        this.getAllRegion();
        switch (this.echartsStyleItem) {
            case "line":
                this.initLineChart();
            break;
            case "bar":
                this.initBarChart();
            break;
            case "barDJ":
                this.initBarDJChart()
            break;
            // case "parallel":
            //     this.initParallelChart()
            // break;
            case "nestedPies":
                this.initNestedPiesChart()
            break;
            case "treemap":
                this.initTreemapChart()
            break;      
            default:
            break;
        }
      }
    });
    EventBus.$on("clearMicroAllChart",()=>{
      this.region = [];
      this.tableData = [];
      this.iSnoData = true;
    });
  },
  methods:{
    ...mapMutations(["changeShowEchartsLayer","changeShowMapTableLayer","changeShowMapControl"]),
    //获取所有区划
    getAllRegion(){
      let arr = this.tableData.tableData;
      this.region = [];
      arr.map(item=>{
         this.region.push(item["区划"]);
      })
    },
    //更新显示的数字指标
    changeShowIdenNum(){
      switch (this.echartsStyleItem) {
        case "line":
            this.initLineChart();
        break;
        case "bar":
            this.initBarChart();
        break;
        case "barDJ":
            this.initBarDJChart()
        break;
        // case "parallel":
        //     this.initParallelChart()
        // break;
        case "nestedPies":
            this.initNestedPiesChart()
        break;
        case "treemap":
            this.initTreemapChart()
        break;      
        default:
        break;
      }
    },
    initLineChart() {
      this.echartsStyleItem = "line";
      let data = this.tableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      if (data.tableLegend.length) {
        data.tableLegend.map(ite => {
          if (ite.name == "区划") {//组装X轴数据
            if (data.tableData.length) {
              data.tableData.map(item => {
                if(item["区划"]=="总计"){//过滤掉总计
                  return;
                }
                xAxisData.push(item["区划"]);
                return item;
              });
            }
          } else {
            if (data.changeNum == "all") {
              //总量分组
              if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                legend.push(ite.name);
                let seriesItem = {
                  type: "line",
                  stack: "总量",
                  areaStyle: {},
                  connectNulls: true
                };
                seriesItem.name = ite.name;
                seriesItem.data = [];
                if (data.tableData.length) {
                  data.tableData.map(item => {
                    if(item["区划"]=="总计"){//过滤掉总计
                      return;
                    }
                    if (item[ite.name] == "-") {
                      seriesItem.data.push(null);
                    } else {
                      seriesItem.data.push(item[ite.name]);
                    }
                    return item;
                  });
                }
                series.push(seriesItem);
              }
            } else if (data.changeNum != "all") {
              //多分组值
              if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                //数字指标匹配
                legend.push(ite.name);
                if (ite.hasOwnProperty("children")) {
                  //取该指标下所有分组值
                  let childIden = ite.children;
                  childIden.map(child => {
                    if(child.title == "总计"){
                      return;
                    }
                    let seriesItem = {
                      type: "line",
                      stack: "总量",
                      areaStyle: {},
                      connectNulls: true
                    };
                    seriesItem.name = child.title;
                    seriesItem.data = [];
                    if (data.tableData.length) {
                      data.tableData.map(item => {
                        if(item["区划"]=="总计"){//过滤掉总计
                          return;
                        }
                        if (item[child.name] == "-") {
                          seriesItem.data.push(null);
                        } else {
                          seriesItem.data.push(item[child.name]);
                        }
                      });
                    }
                    series.push(seriesItem);
                  });
                }
              }
            }
          }
        });
      }
      this.regionNameList = xAxisData;
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            axis: "x",
            label: {
              show: false
            }
          }
        },
        connectNulls: true,
        grid: {
          left: "6%",
          top: "10%",
          bottom: "20%",
          containLabel: true
        },
        toolbox:{
          right:45,
          top:20,
          feature:{
            saveAsImage:{
              backgroundColor:"rgba(50, 161, 180, 1)",
              iconStyle:{
                // color:'#b0dee2',
                // borderWidth :0,
                emphasis:{
                  color:'#b0dee2'
                }
              }
            }
          }
        },
        calculable: true,
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          }
        },
        series: series
      };
      setTimeout(() => {
        this.renderChart(option);
      })
    },
    initBarChart() {
      this.echartsStyleItem = "bar";
      let data = this.tableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      setTimeout(() => {
        if (data.tableLegend.length) {
          data.tableLegend.map(ite => {
            if (ite.name == "区划") {//组装X轴
              if (data.tableData.length) {
                data.tableData.map(item => {
                  if(item["区划"]=="总计"){//过滤掉总计
                    return;
                  }
                  xAxisData.push(item["区划"]);
                  return item;
                });
              }
            } else {
              if (data.changeNum == "all") {
                //总量分组
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  legend.push(ite.name);
                  let seriesItem = {
                    type: "bar",
                    // stack: "总量",
                    areaStyle: {}
                  };
                  seriesItem.name = ite.name;
                  seriesItem.data = [];
                  if (data.tableData.length) {
                    data.tableData.map(item => {
                      if(item["区划"]=="总计"){//过滤掉总计
                        return;
                      }
                      if (item[ite.name] == "-") {
                        seriesItem.data.push(null);
                      } else {
                        seriesItem.data.push(item[ite.name]);
                      }
                      return item;
                    });
                  }
                  series.push(seriesItem);
                }
              } else if (data.changeNum != "all") {
                //多指标多分组值
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  //数字指标匹配
                  legend.push(ite.name);
                  if (ite.hasOwnProperty("children")) {
                    //取该指标下所有分组值
                    let childIden = ite.children;
                    childIden.map(child => {
                      if(child.title == "总计"){//过滤掉总计
                        return;
                      }
                      let seriesItem = {
                        type: "bar",
                        // stack: "总量",
                        areaStyle: {},
                        connectNulls: true
                      };
                      if (data.changeNum != "all") {
                        //其他分组去除指标文字
                        seriesItem.name = child.title;
                      }
                      seriesItem.data = [];
                      if (data.tableData.length) {
                        data.tableData.map(item => {
                          if(item["区划"]=="总计"){//过滤掉总计
                            return;
                          }
                          if (item[child.name] == "-") {
                            seriesItem.data.push(null);
                          } else {
                            seriesItem.data.push(item[child.name]);
                          }
                        });
                      }
                      series.push(seriesItem);
                    });
                  }
                }
              }
            }
            return ite;
          });
        }
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              axis: "x",
              label: {
                show: false
              }
            }
          },
          barMaxWidth: 40,
          grid: {
            left: "6%",
            top: "10%",
            bottom: "20%",
            containLabel: true
          },
          toolbox:{
            right:45,
            top:20,
            feature:{
              saveAsImage:{
                backgroundColor:"rgba(50, 161, 180, 1)",
                iconStyle:{
                  // color:'#b0dee2',
                  // borderWidth :0,
                  emphasis:{
                    color:'#b0dee2'
                  }
                }
              }
            }
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          series: series
        };
        this.renderChart(option);
      }, 300);
    },
    initBarDJChart() {
      this.echartsStyleItem = "barDJ";
      let data = this.tableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      setTimeout(() => {
        if (data.tableLegend.length) {
          data.tableLegend.map(ite => {
            if (ite.name == "区划") {//组装X轴
              if (data.tableData.length) {
                data.tableData.map(item => {
                  if(item["区划"]=="总计"){//过滤掉总计
                    return;
                  }
                  xAxisData.push(item["区划"]);
                  return item;
                });
              }
            } else {
              if (
                data.changeNum == "all"
              ) {
                //总量分组
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  legend.push(ite.name);
                  let seriesItem = { type: "bar" };
                  seriesItem.name = ite.name;
                  seriesItem.data = [];
                  if (data.tableData.length) {
                    data.tableData.map(item => {
                      if(item["区划"]=="总计"){//过滤掉总计
                        return;
                      }
                      if (item[ite.name] == "-") {
                        seriesItem.data.push(null);
                      } else {
                        seriesItem.data.push(item[ite.name]);
                      }
                      return item;
                    });
                  }
                  series.push(seriesItem);
                }
              } else if (
                data.changeNum != "all"
              ) {
                //多指标多分组值
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  //数字指标匹配
                  legend.push(ite.name);
                  if (ite.hasOwnProperty("children")) {
                    //取该指标下所有分组值
                    let childIden = ite.children;
                    childIden.map(child => {
                      if(child.title == "总计"){
                        return;
                      }
                      let seriesItem = {
                        type: "bar",
                        stack: "总量",
                        areaStyle: {},
                        connectNulls: true,
                        name : child.title,
                        data:[]
                      };
                      if (data.tableData.length) {
                        data.tableData.map(item => {
                          if(item["区划"]=="总计"){//过滤掉总计
                            return;
                          }
                          if (item[child.name] == "-") {
                            seriesItem.data.push(null);
                          } else {
                            seriesItem.data.push(item[child.name]);
                          }
                        });
                      }
                      series.push(seriesItem);
                    });
                  }
                }
              }
            }
            return ite;
          });
        }
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              axis: "x",
              label: {
                show: false
              }
            }
          },
          barMaxWidth: 40,
          grid: {
            left: "6%",
            top: "10%",
            bottom: "20%",
            containLabel: true
          },
          toolbox:{
            right:45,
            top:20,
            feature:{
              saveAsImage:{
                backgroundColor:"rgba(50, 161, 180, 1)",
                iconStyle:{
                  // color:'#b0dee2',
                  // borderWidth :0,
                  emphasis:{
                    color:'#b0dee2'
                  }
                }
              }
            }
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          series: series
        };
        this.renderChart(option);
      }, 300);
    },
    initParallelChart(){
      let data = this.tableData
      this.echartsStyleItem = "parallel"
      setTimeout(()=>{
        if(data.tableLegend.length>2 ){
        //x轴枚举
        let schema = [];
        let seriesData = [];
        let parallelAxisData = [];
        let lineStyle = {
          normal: {
              width: 2,
              opacity: 0.5
          }
        }
        let legendData = []
        if(data.tableLegend.length){
          data.tableLegend.map((item,index)=>{
            if(item.name != "区划"&&item.name.indexOf(this.iden_num.selectedValue)!=-1){
              let obj = {index:index}
              let dataObj = []
              obj.name = item.value
              // obj.text = item.name.indexOf("-") == -1?item.name:item.name.split("-")[1]
              obj.text = item.name;
              schema.push(obj)
            }
          })
        }
        if(schema.length){
          schema.map((item,index)=>{
            let obj = {dim:item.index,name:item.text}
            parallelAxisData.push(obj)
          })
        }
        if(data.tableData.length){
          data.tableData.map((item,index)=>{
            let dataArr = []
            let obj = {type: 'parallel'}
            legendData.push(item["区划"])
            if(data.tableLegend.length){
              data.tableLegend.map((ite,index)=>{
                if(ite.name != "区划"){
                  dataArr.push(item[ite.name])
                }
              })
            }
            obj.data = [dataArr];
            obj.lineStyle = lineStyle;
            obj.name = item["区划"]
            seriesData.push(obj)
          })
        }
        var option={
          parallelAxis:parallelAxisData,
          legend: {
            data: legendData,
            top:60,
            textStyle:{
              color:'rgba(255, 255, 255, 0.6);'
            },
          },
          toolbox:{
            right:45,
            top:20,
            feature:{
              saveAsImage:{
                backgroundColor:"rgba(255,255,255, 1)"
              }
            }
          },
          series:seriesData,
          parallel:{
            left: "6%",
            top: "18%",
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove'
            },
            parallelAxisDefault:{
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              nameTextStyle: {
                color: '#fff',
                fontSize: 12
              },
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
            }
          }
        }
        this.renderChart(option);
      }else{
        var option={
          parallelAxis:[],
          legend: {
            data: [],
            bottom:10,
            width:330,
            height:60,
            padding:3,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          toolbox:{
            right:45,
            top:20,
            feature:{
              saveAsImage:{
                backgroundColor:"rgba(50, 161, 180, 1)"
              }
            }
          },
          series:[],
          parallel:{
            left: "6%",
            top: "16%",
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove'
            },
            parallelAxisDefault:{
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              nameTextStyle: {
                color: '#fff',
                fontSize: 12
              },
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
            }
          }
        }
        this.renderChart(option);
        }
      },300)
    },
    initNestedPiesChart() {
      this.echartsStyleItem = "nestedPies";
      let data = this.tableData;
      setTimeout(() => {
        let angleData = []; //枚举(区划)
        let seriesData = [];
        let pieData = {};//外层数据
        pieData.data = [];
        pieData.type = "pie";
        pieData.radius = ["85%", "80%"];
        pieData.top = 10;
        pieData.avoidLabelOverlap = false;
        pieData.labelLine = { normal: { show: false } };
        pieData.label = {
          normal: {
            show: true,
            position: "outside",
            color: "#fff"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "15",
              fontWeight: "normal",
              color: "#fff"
            }
          }
        };
        data.tableData.map(ite => {
          if(ite["区划"]!="总计"){
            angleData.push(ite["区划"]);
          }
        });
        let pieDataData = [];
        data.tableLegend.map((legend, index) => {//组装内部柱状图数据
          if (index && legend.name.indexOf(this.iden_num.selectedValue) != -1) {
            if(legend.hasOwnProperty("children")){//多个分组值
              let pie = {};
              pie.name = legend.title;
              let legendChild = legend.children;
              legendChild.map((child)=>{
                if(child.title!="总计"){
                  let obj = {};
                  obj.data = [];
                  obj.type = "bar";
                  obj.coordinateSystem = "polar";
                  obj.top = 10;
                  obj.stack = "a";
                  obj.name = child.title;
                  data.tableData.map(data => {
                    if(data["区划"]!="总计"){
                      obj.data.push({ value: data[child.name], name: data["区划"] });
                    }
                  });
                  seriesData.push(obj);
                }else{//总计数据放入外层圆
                  pie.value = data.tableData[0][child.name];
                }
              })
              pieDataData.push(pie);//获取外层圆数据（数字指标总计数）
            }else{
              let pie = {};
              pie.name = legend.name;
              if(legend.name!="总计"){
                let obj = {};
                obj.data = [];
                obj.type = "bar";
                obj.coordinateSystem = "polar";
                obj.top = 10;
                obj.stack = "a";
                obj.name = legend.name;
                data.tableData.map(data => {
                  if(data["区划"]!="总计"){
                    obj.data.push({ value: data[legend.name], name: data["区划"] });
                  }
                });
                seriesData.push(obj);
              }
              pie.value = data.tableData[0][legend.name];
              pieDataData.push(pie);
            }
          }
          return legend;
        });
        pieData.data = pieDataData;
        seriesData.push(pieData);
        var option = {
          title: { id: "nestedPies" },
          tooltip: {
            trigger: "item"
          },
          toolbox:{
            right:45,
            top:20,
            feature:{
              saveAsImage:{
                backgroundColor:"rgba(50, 161, 180, 1)",
                iconStyle:{
                  // color:'#b0dee2',
                  // borderWidth :0,
                  emphasis:{
                    color:'#b0dee2'
                  }
                }
              }
            }
          },
          angleAxis: {
            type: "category",
            data: angleData,
            z: 10,
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
          radiusAxis: {
            nameTextStyle: {
              color: "#ffffff"
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
          polar: {
            center: ["50%", "50%"],
            radius: "70%"
          },
          series: seriesData
        };
        this.renderChart(option);
      }, 300);
    },
    initTreemapChart() {
      let that = this;
      this.echartsStyleItem = "treemap";
      let data = this.tableData;
      let seriesData = [];
      setTimeout(() => {
        if (data.tableLegend.length) {
          data.tableLegend.map(item => {
            if (
              item.name != "区划" &&
              item.name.indexOf(this.iden_num.selectedValue) != -1
            ) {
              if(item.hasOwnProperty("children")){//多分组
                let childLegend = item.children;
                childLegend.map(legend =>{
                  if(legend.title!="总计"){//过滤掉总计
                    let obj = { value: 0, children: [] };//分组
                    obj.name = legend.title;
                    data.tableData.map(ite => {
                      if(ite["区划"]!="总计"){//过滤掉总计
                        let objChildren = {};
                        obj.value += ite[legend.title];
                        objChildren.name = ite["区划"];
                        objChildren.value = ite[legend.name];
                        obj.children.push(objChildren);
                      }
                    });
                    obj.value = data.tableData[0][legend.name];
                    seriesData.push(obj);
                  }
                })
              }else{//总量分组
                if(item.name!="总计"){//过滤掉总计
                  let obj = { value: 0, children: [] };
                  obj.name = item.name;
                  data.tableData.map(ite => {
                    if(ite["区划"]!="总计"){//过滤掉总计
                      let objChildren = {};
                      obj.value += ite[item.name];
                      objChildren.name = ite["区划"];
                      objChildren.value = ite[item.name];
                      obj.children.push(objChildren);
                    }
                  });
                  obj.value = data.tableData[0][this.iden_num.selectedValue];
                  seriesData.push(obj);
                }
              }
            }
          });
        }
        var option = {
          tooltip: {
            show: true,
            formatter: function (data) {
              let result = "";
              let treePathInfo = data.treePathInfo;
              let len = treePathInfo.length-1;
              treePathInfo.map((info,index) =>{
                if(info.name!=that.iden_num.selectedValue){
                  if(index!=len){
                    result +=info.name+"</br>";
                  }else{
                    result +=info.name+":"+info.value+"</br>";
                  }
                }
              })
              return result;
            },
          },
          toolbox:{
            right:45,
            top:20,
            feature:{
              saveAsImage:{
                backgroundColor:"rgba(50, 161, 180, 1)",
                iconStyle:{
                  // color:'#b0dee2',
                  // borderWidth :0,
                  emphasis:{
                    color:'#b0dee2'
                  }
                }
              }
            }
          },
          color: ["rgb(42,230,218)"],
          series: [
            {
              type: "treemap",
              name: this.iden_num.selectedValue,
              top: "10%",
              breadcrumb: {
                show: true,
                top: "92%"
              },
              data: seriesData,
              leafDepth: 2,
              levels: [
                {
                  itemStyle: {
                    normal: {
                      borderColor: "rgba(255,255,255,.6)",
                      borderWidth: 2,
                      gapWidth: 4
                    }
                  }
                },
                {
                  colorSaturation: [0.3, 0.6],
                  itemStyle: {
                    normal: {
                      borderColorSaturation: 0.7,
                      gapWidth: 5,
                      borderWidth: 2
                    }
                  }
                },
                {
                  colorSaturation: [0.3, 0.5],
                  itemStyle: {
                    normal: {
                      borderColorSaturation: 0.6,
                      gapWidth: 1
                    }
                  }
                },
                {
                  colorSaturation: [0.3, 0.5]
                }
              ]
            }
          ]
        };
        this.renderChart(option);
      }, 300);
    },
    renderChart(option) {
      let that = this;
      this.myChart = echarts.dispose(
        document.getElementById("chart-container-zoom")
      );
      this.myChart = echarts.init(document.getElementById("chart-container-zoom"),"macarons");
      this.myChart.on('click',function(params){
        let data = that.tableData;
        if(params.componentSubType != "treemap" && params.dimensionNames[0] == "radius" && params.componentSubType == "bar"){
          var index = params.dataIndex;
          var i = option.series.length - 1
          let pieData = []
          data.tableData.map(item=>{
            if(item["区划"] == params.name){
              data.tableLegend.map((ite,i)=>{
                if(i){
                  let pie = {}
                  pie.name = ite.name
                  pie.value = item[ite.name]
                  pieData.push(pie)
                }
              })
            }
          })
          option.series[i].data = pieData
          that.myChart.setOption(option,true);
        }
      })
      this.myChart.on('dblclick',function(params){
        if(that.region.indexOf(params.name)!=-1){
          that.updateRegion(params.name);
        }
      })
      // setTimeout(()=>{
      //   that.myChart.clear()
      //   that.myChart.setOption(option,true);
      // },3000)
      this.myChart.setOption(option);
      
    },
    closeInfoWin() {
      this.$store.commit("changeEnlargeChart",false);
      this.$store.commit("changeShowMapControl", true);
      this.$store.commit("changeShowMapTableLayer", true);
      this.$store.commit("changeShowEchartsLayer", true);
      EventBus.$emit("chartType", this.echartsStyleItem);
    },
    //双击更新区划下钻
    updateRegion(name){
      let tableData = this.tableData.tableData;
      let updateRegion = [];
      for(let i in tableData){
        if(tableData[i]["区划"]==name){
          updateRegion.push(tableData[i].region)
        }
      }
      if(updateRegion.length>0){
        EventBus.$emit("changeToolRegion", updateRegion);
      }
    },
  }
  
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../css/rule.scss";
.chart-panel-zoom {
  // width: 99%;
  height: 100%;
  // top: 5px;
  font-size: 1.4rem;
  z-index: 1000;
  background: rgba(23, 128, 154, 0.9);
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .icon-font {
      float: right;
      line-height: 35px;
      cursor: pointer;
    }
    .close {
      margin-right: 8px;
      color:#fff;
    }
    .fscreen {
      margin-right: 18px;
    }
  }
  .nav {
    height: 45px;
    border-bottom: #eaeaea solid 1px;
    .pos {
      float: left;
      margin-left: 15px;
      line-height: 45px;
    }
    .fontClass {
      cursor: pointer;
      font-size: 2rem;
      color: #017bce;
    }
  }
  .chart-content {
    width:100%;
    height: calc(100% - 81px);
    display: flex;
    align-items: center;
    justify-content: center;
    .chart {
      height: 100%;
      width: 100%;
      div{
        margin:auto;
      }
    }
    #chart-container-zoom{
      min-width: 1100px;
      min-height: 600px;
      height: 100%;
      width: 100%;
    }
  }
  .echarts-select{
    height:30px;
  }
  .changeEcharts{
    position: absolute;
    top:40px;
    right:60px;
    width:130px;
    z-index: 10002;
    padding:20px 0 10px 0;
  }
  .noData{
    text-align:center;
    line-height: 170px;
    color:rgba(255,255,255,.6);
    margin-left:84px;
  }
  .changeEcharts{
    span{
      cursor: pointer;
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" >
@import "../../css/rule.scss";
#chart-panel-zoom{
  width:100%;
  height:100%;
  .selectBox{
    float: left;
    margin-top: 10px;
    margin-left: 33px;
    position: absolute;
    z-index: 999;
    input.el-input__inner{
      background-color: #17809a;
      border: 1px solid #2f8da4;
      color: $fontColorLimit;
    }
  }
  #chart-container-zoom{
    min-width: 1100px;
    min-height: 600px;
  }
}
</style>